<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    /**
     *  jsx 插值表达式是学习的重点
     * 
     *  1. 什么是js表达式？ 什么是js语句？两者有什么区别？
     *  js语句：没有值的
     *      1. if else条件语句
     *      2. for , while 循环语句
     *      3. switch语句
     *      4. 赋值语句  var a = 1;
     * 
     *  js表达式：表达式是有最终值的,我可以打印，可以用变量接收
     *      1. 三元表达式： 
     *      2. 逻辑运算表达式：  5 && 8, 0 || -1
     *      3. 函数调用表达式：  fn()
     *      4. 常量：
     *      5. 变量：usonb : you so n b
     *               u: undefined
     *               s: string symbel
     *               o: object  [array function]
     *               n: null number
     *               b: boolean
     *          
     * 
     * 
     * react 中的插值表达式 ：  {js表达式}
     * 
     *  1. 布尔值、null、undefined、不渲染任何东西
     *  2. 数组：将数组中的每一项都进行遍历输出
     *  3. 对象：不渲染，直接报错
     *  4. 函数名：不渲染，报错
     */

    const root = ReactDOM.createRoot(document.querySelector('#root'))

    function fn(){
        console.log(123123)
        return 222;
    }
    root.render((
        <>
            <p>数字: {100}</p>
            <p>字符串: {'我是字符串'}</p>
            <p>布尔值：{false}{true}</p>
            <p>null: {null}</p>
            <p>undefined:{undefined}</p>
            <p>NaN: {NaN}</p>
            <p>数组：{[1,2,3,4]}</p>
            <p>0 : {0}</p>
            {/*
            <p>对象：{{username:"yuonly"}}</p>
            */}
            {/*
            <p>函数：{fn}</p>
            */}
            <p>函数调用：{fn()}</p>
            <p>逻辑与运算: {5 && 10}</p>
            <p>逻辑或运算: {-1 || false}</p>
        </>
    ))
</script>

</html>